<!-- 用户列表 -->
<template>
  <div class="user-list">
    <div ref="dgtools" class="filter-container">
      <el-input
        style="width: 140px"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="dg.ps.find">
      </el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>

      <el-button type="primary" @click="openAddMd">添加</el-button>
      <el-button type="primary" @click="openUpdMd">修改</el-button>

      <el-input 
        style="width: 320px"
        placeholder="请输入内容" 
        v-model="dg.ps.find" 
        class="input-with-select"
      >
        <el-select 
          v-model="dg.ps.type" 
          :value="'餐厅名'" 
          slot="prepend" 
          placeholder="请选择"
          style="width: 120px"
        >
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <el-button @click="toggleSelection([dg.list[1], dg.list[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>

    </div>
    <el-table
      ref="multipleTable"
      :data="dg.list"
      :height="bodyHeight"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="my-table-expand">
            <el-form-item label="单位名称">
              <span>{{ props.row.addTime }}</span>
            </el-form-item>

            <el-form-item label="日期">
              <span>{{ props.row.baseUserId.realName }}</span>
            </el-form-item>

            <el-form-item label="姓名">
              <span>{{ props.row.unitName }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        prop="addTime"
        label="日期">
      </el-table-column>

      <el-table-column
        prop="baseUserId.realName"
        label="姓名"
        width="40">
      </el-table-column>

      <el-table-column
        prop="unitName"
        label="单位名称" 
        width="100"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <pagination 
      v-show="dg.total > 0" 
      :total="dg.total" 
      :page.sync="dg.ps.page" 
      :limit.sync="dg.ps.rows" 
      @pagination="getDgList" />


    <el-dialog 
      v-el-drag-dialog="{drag: true, full: true, resize: true}"
      @dragDialog="handleDrag"
      title="添加用户" 
      :close-on-click-modal="false"
      :visible.sync="fm.addMdVs"
    >
      <el-form :model="fm">
        <el-form-item label="姓名" :label-width="fm.labelWidth">
          <el-input ref="inputName" v-model="fm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="年龄" :label-width="fm.labelWidth">
          <el-input v-model="fm.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fm.addMdVs = false">取 消</el-button>
        <el-button type="primary" @click="fm.addMdVs = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog 
      v-el-drag-dialog="{drag: true, full: true, resize: true}"
      title="修改用户" 
      :close-on-click-modal="false"
      :visible.sync="fm.updMdVs"
    >
      <el-form :model="fm">
        <el-form-item label="姓名" :label-width="fm.labelWidth">
          <el-input ref="inputName" v-model="fm.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="年龄" :label-width="fm.labelWidth">
          <el-input v-model="fm.age" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fm.updMdVs = false">取 消</el-button>
        <el-button type="primary" @click="fm.updMdVs = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import { getCusPageList } from '@/api/services/cus.service';
import Pagination from '@/components/Pagination' // 基于el分页的二次包

export default {
  name: 'userList',
  mixins: [DataGridResize],
  directives: { elDragDialog },
  components:{ Pagination },
  data() { 
    return {
      // 数据列表参数
      dg:{
        loading: true,
        multipleSelection: [],
        ps: { 
          page: 1, rows: 20,
          find: '',
          type: '',
        },
        total: 0,
        list: []
      },
      fm: {
        addMdVs: false,
        updMdVs: false,
        labelWidth: '120px',
        name: '',
        age: ''
      }
    }
  },
  created() {
    // 获取-table数据
    this.getDgList();
  },
  methods: {
    handleDrag() {
      // 姓名输入框
      this.$refs.inputName.focus();
    },
    // 获取-列表数据
    getDgList() {
      let loading = this.U.qloading('数据请求中...');// 添加遮罩
      getCusPageList(this.dg.ps).then(res => {
        this.dg.list = res.data;
        this.dg.total = res.count;

        this.U.qclose(loading);      // 关闭遮罩
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 打开添加-弹框
    openAddMd(){
      this.fm.addMdVs = true;
    },
    // 打开修改-弹框
    openUpdMd(){
      this.fm.updMdVs = true;
    }
  },
 }
</script>

<style lang="less" scoped>
  .el-select .el-input {
    width: 130px;
  }
</style>
